<template>
  <div>
    <h1>watch监听器-复杂</h1>
    <input type="text" v-model="obj.name" />
    <input type="text" v-model="obj.age" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {
        name: "于鸿斌",
        age: 19,
      },
    };
  },
  // 解决新旧数据一样的bug
  computed:{
    // 深拷贝一下
    yhb(){
        return JSON.parse(JSON.stringify(this.obj))
    }
  },
  watch: {
    // 一 基本语法:监听基本数据的变量(修后的新数据,修改前的旧数据){}
    // 二 监听复杂的数据类型的语法:
    /*
            对象/数组:{
                handler(修后的新数据,修改前的旧数据){
                    // 逻辑
                },
                // 深度监听.默认是false
                deep:true,
                // 打开组件默认会监听(触发)一次.
                immediate:true
            }
        */
    //  watch深度监听的两个bug
    // 1 默认调用一次的时候,没有旧数据.解决方法:判断有旧数据就打印否则不打印
    // 2 深度监听复杂的数据类型,会出现新数据和旧数据一样的bug.解决方法:通过计算属性解决
    // yhb: {
    //   handler(newVal, oldVal) {
    //     if(oldVal){
    //         console.log(oldVal,"旧数据")
    //     }
    //     console.log(newVal,"新数据")
    //   },
    //   // 深度监听.默认是false
    //   deep: true,
    //   // 打开组件默认会监听(触发)一次.旧数据是undefined因为没有修改所以没有旧数据只有新数据
    //   immediate: true,
    // },

    // 监听对象的属性
    // 三 "对象.属性"(修后的新数据,修改前的旧数据){}
    "obj.name"(newVal,oldVal){
        console.log(newVal,oldVal)
    }
  },
};
</script>